<section class="channel-h5">
    <div class="channel-h5__header">
        <p class="channle-h5__title">
            重磅推荐<i>推</i>
        </p>
        <div class="tab">
            <a href="javascript:" class="tab__on">男</a>
            <a href="javscript:">女</a>
        </div>
    </div>
    <ul class="list-h5">
            <li v-for="(key,index) in recommend" v-if="index==0">
                <div class="book-h5"  v-bind:data-href="key.fiction_id" v-on:click = "doBook($event)">
                    <div class="book-h5__cover">
                        <img alt="{{ key.title }}" v-bind:src="key.cover">
                        <p class="book-h5__finish">完结</p>
                    </div>
                    <div class="book-h5__info">
                        <p class="book-h5__title">{{ key.title }}</p>
                        <p class="book-h5__auther">{{ key.authors }}</p>
                        <p class="book-h5__summary">{{ key.summary }}</p>
                        <div class="book-h5__warp">
                            <div class="book-h5__tag" v-for="tage in key.tags">{{ tage }}</div>
                        </div>
                    </div>
                </div>
            </li>
            <li v-for="(key,index) in recommend" v-if="index>0 && index<9">
                <div class="book-h5 bookh5__no-img"  v-bind:data-href="key.fiction_id" v-on:click = "doBook($event)">
                    <span class="book-h5_no-img__order">0{{ index+1 }}</span>
                    <div class="book-h5_no-img__info">
                        <p class="book-h5_no-img__title">{{ key.title }}</p>
                    </div>
                </div>
            </li>
        </ul>
</section>